feat(differentials): make result cards open on tap and lift their design - #2464

Summary

• Made the whole differential result card open the record. Previously only the title text was a link and the rest of the card was inert, so there was no visible answer to "where do I click to open this?". The existing title link now stretches a pseudo-element across the card rather than adding a second overlay anchor, so assistive technology still hears one link named by the title.
• Added an explicit Open differential / Open presentation affordance with a chevron on every card, as visible text naming that hit area.
• Reworked the compare control so it cannot be confused with opening the card: on phone cards it is now a labelled Compare / Added pill sitting in a footer action row opposite the open affordance; desktop rows keep the compact box in their trailing column. Both remain a real checkbox input with the same data-testid hooks and the same accessible name.
• Added a left urgency rail (emergent / urgent / investigations) so triage priority is legible before any text is read, and lifted the card design: rounded-xl, a hover elevation and background shift on desktop rows, a press state on phone cards, and a wider trailing column so the open affordance fits on one line.
• Fixed a defect introduced mid-change: ringing the stretched pseudo-element stacked a second focus ring, because the shared :focus-visible rule in globals.css is unlayered and wins over an outline-none utility. The focus ring now stays singular on the title, as the focus is singular assertion in ui-smoke requires.

Behaviour verified in a real browser at 390px and 1440px: clicking the card body navigates to the differential, and clicking the compare control toggles selection without navigating.

Verification

• npm run verify:pr-local — check:runtime, check:installed-lock-parity, format:changed, lint, typecheck all completed. The unit suite reported 3 failures on the first run; all 3 reproduce on a clean tree at this base and 2 were shallow-clone artefacts that cleared after git fetch --deepen=2000.
• Full unit suite after deepening: Test Files 1 failed | 931 passed (932) / Tests 1 failed | 11714 passed | 4 skipped. The single failure is tests/caring-contacts-contact-time-adjustment.dom.test.tsx, which fails identically with this change stashed — it is a time-of-day dependent test in an unrelated module, not a regression from this diff.
• tests/differentials-compare-selection.dom.test.tsx — Test Files 1 passed (1) / Tests 10 passed (10).
• Chromium journeys for the changed owner: tests/ui-tools.spec.ts + tests/ui-smoke.spec.ts filtered to differential|focus is singular — 16 passed (32.1s).
• Adjacent Chromium journeys: ui-accessibility, ui-smoke, ui-phone-scroll, ui-phone-scroll-page-owned, ui-chrome-scroll — 195 passed (9.2m). Note this run predates the focus-ring fix; the focused re-run above covers the final code.
• npm run verify:ui — not run in full. UI verification partially run: the changed owner's journeys and the adjacent phone/chrome/accessibility specs were proven directly (above); the complete Chromium gate was not run because this change is scoped to one mode's result cards and touches no shared chrome foundation.
• npm run eval:retrieval:quality — not applicable, no retrieval, ranking, selection, chunking or scoring behaviour changed.
• npm run check:production-readiness — not applicable, no clinical workflow, privacy, environment, Supabase, source governance or deployment behaviour changed.

Risk and rollout

• Risk: Low, and presentational. One file changes, src/components/clinical-dashboard/differentials-home.tsx. No data, routing, ranking or clinical logic is touched; the hrefs, the selection state, and the accessible names are all unchanged. The realistic risk is layout: a wider trailing column on desktop rows and a footer action row on phone cards. Both were checked against the narrow-viewport overflow and badge single-line guards, which pass.
• Rollback: Revert the single commit on this branch. There is no migration, no generated artefact, and no state to unwind.
• Provider or production effects: None.
• RAG impact: none

Notes

• The stretched-link pattern means text inside a card is no longer selectable, since the link's pseudo-element covers it. That is the accepted trade for making the whole card a tap target on a phone-first browse list; the full text remains selectable on the record's own detail page.
• scripts/pr-policy.mjs classifies this diff as clinicalRisk: false, operationalRisk: false, ragRanking: false, ui: true, so the Clinical Governance Preflight section does not apply.

🤖 Generated with Claude Code

https://claude.ai/code/session_017QSV1pJvt6QnprenaWFyza

Generated by Claude Code